<template>
	<view class="cake-item" @tap="gogoods">
			<image  class="poster" :src="getdata.img" mode=""></image>
			<view class="info-cont">
				<view class="info flex align-center justify-between">
					<view class="">
						<view class="fs-28">
							{{getdata.name}}
						</view>
						<view class="fs-16">
							{{getdata.french}}
						</view>
					</view>
					<view @click.stop="gocart" class="cart-btn margin-right-sm">
						<text class="iconfont icon-gouwuche"></text>
					</view>
				</view>
				<view class="fs-18">
					<text class="fs-14">￥</text>
					{{getdata.price}}
				</view>
	
			</view>
		</view>
</template>

<script>
	export default {
		name:"good-item",
		data() {
			return {
				
			};
		},
		props:{
			getdata:Object
		},
		methods:{
			gogoods(){
				uni.setStorage({
					key:"goodata",
					data:this.getdata
				});
				uni.navigateTo({
					url:"/pages/cake/goods"
				})
			},
			// 作用一样，三种写法不同
			/* ...mapMutations({'addcart':'addcart'})
			...mapMutations(['addcart']) */
			gocart(){
				this.$store.commit("addcart",{...this.getdata,idx:0});
				uni.navigateTo({
					url:"./cart"
				})
			}
		}
	}
</script>

<style scoped>
	.cake-item {
		width: 350upx;
	}
	.poster {
		height: 350upx;
		background-color: #f5f5f5;
	}
	
	.fs-28 {
		margin-top: 24upx;
	}
	
	.fs-16 {
		margin: 14upx 0;
	}
	
	.fs-18 {
		margin-bottom: 22upx;
	}
	
	.cart-btn {
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		background-color: #ffe32a;
		text-align: center;
		line-height: 60upx;
	}
</style>